import React, { useState, useEffect } from 'react';
import '../MonitoringPanel.css';

interface EnvironmentRealtimeDataPanelProps {
  // 可以添加从父组件传入的属性
}

// 生成模拟的环境数据
const generateEnvironmentData = () => {
  const months = ['1月', '2月', '3月', '4月', '5月', '6月'];
  // 使用固定数据来确保图表形状与图片效果一致
  const temperatureData = [25, 30, 18, 22, 28, 40]; // 温度数据
  const humidityData = [55, 50, 65, 70, 45, 40]; // 湿度数据
  
  return {
    months,
    temperatureData,
    humidityData
  };
};

const EnvironmentRealtimeDataPanel: React.FC<EnvironmentRealtimeDataPanelProps> = () => {
  const [data, setData] = useState(generateEnvironmentData());
  const [isAnimating, setIsAnimating] = useState(false);

  // 模拟数据更新
  useEffect(() => {
    const interval = setInterval(() => {
      setIsAnimating(true);
      setTimeout(() => {
        setData(generateEnvironmentData());
        setIsAnimating(false);
      }, 300);
    }, 20000); // 每20秒更新一次数据

    return () => clearInterval(interval);
  }, []);

  // 计算图表的缩放和偏移 - 使用固定坐标替代百分比
  const calculateChartPoints = (values: number[], chartWidth: number = 280, chartHeight: number = 80, margin: number = 10) => {
    const maxValue = Math.max(...values);
    const minValue = Math.min(...values);
    const range = maxValue - minValue || 1;
    const step = chartWidth / (values.length - 1);
    
    return values.map((value, index) => {
      const x = margin + index * step;
      const y = margin + chartHeight - ((value - minValue) / range) * chartHeight;
      return { x, y };
    });
  };

  const temperaturePoints = calculateChartPoints(data.temperatureData);
  const humidityPoints = calculateChartPoints(data.humidityData);

  // 生成SVG路径 - 使用固定坐标
  const generatePath = (points: { x: number; y: number }[]) => {
    return points.map((point, index) => 
      index === 0 ? `M ${point.x} ${point.y}` : `L ${point.x} ${point.y}`
    ).join(' ');
  };

  const temperaturePath = generatePath(temperaturePoints);
  const humidityPath = generatePath(humidityPoints);

  // 生成填充区域路径
  const generateFillPath = (points: { x: number; y: number }[]) => {
    const lastPoint = points[points.length - 1];
    const firstPoint = points[0];
    return `${generatePath(points)} L ${lastPoint.x} 100 L ${firstPoint.x} 100 Z`;
  };

  const temperatureFillPath = generateFillPath(temperaturePoints);
  const humidityFillPath = generateFillPath(humidityPoints);

  return (
    <div className={`monitoring-panel ${isAnimating ? 'data-update' : ''}`}>
      <div className="panel-header">
        <h3 className="panel-title">
          综合环境实时数据
          <span style={{ 
            fontSize: '12px', 
            fontWeight: 'normal', 
            marginLeft: '8px', 
            color: 'rgba(116, 182, 255, 0.8)'
          }}>
          </span>
        </h3>
      </div>
      
      <div className="chart-container">
        <svg width="100%" height="100%" viewBox="0 0 300 180">
          {/* 背景网格 */}
          <g opacity="0.1">
            {[0, 50, 100].map((value) => (
              <line 
                key={`h-${value}`}
                x1="0" y1={value} x2="300" y2={value} 
                stroke="#74b6ff" strokeWidth="1" 
              />
            ))}
            {[0, 50, 100].map((value) => (
              <line 
                key={`v-${value}`}
                x1={value} y1="0" x2={value} y2="100" 
                stroke="#74b6ff" strokeWidth="1" 
              />
            ))}
          </g>
          
          {/* 坐标轴 */}
          <line x1="0" y1="100" x2="300" y2="100" stroke="#74b6ff" strokeWidth="1" strokeOpacity="0.3" />
          <line x1="0" y1="0" x2="0" y2="100" stroke="#74b6ff" strokeWidth="1" strokeOpacity="0.3" />
          
          {/* 湿度填充区域 */}
          <path 
            d={humidityFillPath}
            fill="url(#humidityGradient)"
            opacity="0.3"
          />
          
          {/* 湿度曲线 */}
          <path 
            d={humidityPath}
            fill="none"
            stroke="#74b6ff"
            strokeWidth="2"
            strokeLinecap="round"
          />
          
          {/* 温度填充区域 */}
          <path 
            d={temperatureFillPath}
            fill="url(#temperatureGradient)"
            opacity="0.3"
          />
          
          {/* 温度曲线 */}
          <path 
            d={temperaturePath}
            fill="none"
            stroke="#FFA500"
            strokeWidth="2"
            strokeLinecap="round"
          />
          
          {/* 数据点 */}
          {temperaturePoints.map((point, index) => (
            <circle 
              key={`temp-point-${index}`}
              cx={point.x}
              cy={point.y}
              r="3"
              fill="#FFA500"
              stroke="#ffffff"
              strokeWidth="1"
            />
          ))}
          
          {humidityPoints.map((point, index) => (
            <circle 
              key={`humid-point-${index}`}
              cx={point.x}
              cy={point.y}
              r="3"
              fill="#74b6ff"
              stroke="#ffffff"
              strokeWidth="1"
            />
          ))}
          
       {/* 数值刻度 */}
<text x="5" y="5" textAnchor="start" fill="#a0aec0" fontSize="10">100</text>
<text x="5" y="55" textAnchor="start" fill="#a0aec0" fontSize="10">50</text>
<text x="5" y="105" textAnchor="start" fill="#a0aec0" fontSize="10">0</text>
          {/* 月份标签 */}
          {data.months.map((month, index) => (
            <text 
              key={`month-${index}`}
              x={10 + (index / (data.months.length - 1)) * 280}
              y="140"
              textAnchor="middle"
              fill="#a0aec0"
              fontSize="10"
            >
              {month}
            </text>
          ))}
          
          {/* 渐变定义 */}
          <defs>
            <linearGradient id="temperatureGradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="#FFA500" stopOpacity="0.8" />
              <stop offset="100%" stopColor="#FFA500" stopOpacity="0" />
            </linearGradient>
            <linearGradient id="humidityGradient" x1="0%" y1="0%" x2="0%" y2="100%">
              <stop offset="0%" stopColor="#74b6ff" stopOpacity="0.8" />
              <stop offset="100%" stopColor="#74b6ff" stopOpacity="0" />
            </linearGradient>
          </defs>
        </svg>
      </div>
    </div>
  );
};

export default EnvironmentRealtimeDataPanel;